<template>
    <div>
        <!--查询条件start --111s-->
        <el-form  >
            <el-form-item label="统计数据:">
                <el-date-picker
                    v-model="createTime1"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="left"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    @change="dateChange1"
                ></el-date-picker>
            </el-form-item>
            <el-form-item style="border-bottom:1px solid #ebeef5;"  label-width="0px">

                <el-form-item label="用户总量：" style="width:30%;display: inline-block;">
                    <input v-model="headdata.totaluser" type="text" readonly>
                </el-form-item>
                <el-form-item label="订单总量：" style="margin-left:80px; width:30%;display: inline-block;">
                    <input v-model="headdata.totalorder" type="text" readonly>
                </el-form-item>
            </el-form-item>

            <el-form-item style="border-bottom:1px solid #ebeef5;"  label-width="0px">

                <el-form-item label="注册用户量：" style="width:30%;display: inline-block;">
                    <input v-model="headdata.usernum" type="text" readonly>
                </el-form-item>
                <el-form-item label="订单量：" style="margin-left:80px; width:30%;display: inline-block; ">
                    <input v-model="headdata.ordernum" type="text" readonly>
                </el-form-item>
            </el-form-item>

        </el-form>

        <el-form :inline="true" :model="query" class="query-form" size="small">

            <el-form-item label="账单统计:">
                <el-date-picker
                    v-model="createTime"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="left"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    @change="dateChange"
                ></el-date-picker>
            </el-form-item>

            <el-form-item class="query-form-item">
                <el-input
                    v-model="query.content"
                    placeholder="请输入订单号/卖家/交易号"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="onSubmit"
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-form-item label="支付方式">
                <el-select v-model="query.paymenttype" placeholder="请选择" @change="shelfstatus" clearable>
                    <el-option
                        label="全部"
                        value=''>
                    </el-option>
                    <el-option
                        label="支付宝"
                        value='2'>
                    </el-option>
                    <el-option
                        label="微信"
                        value='1'>
                    </el-option>
                    <el-option
                        label="银联"
                        value='3'>
                    </el-option>

                </el-select>
            </el-form-item>
          <el-form-item>
              <el-button type="primary" @click.native= "dataexport()"> 导出</el-button>

          </el-form-item>
        </el-form>


        <!--列表start --222s-->
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            border
        >
            <el-table-column label="序号" prop="orderid" width="50" align="center"/>
            <el-table-column label="订单号" prop="ordernumber" width="150" align="center"/>
            <el-table-column label="交易号" prop="outtradeno" width="150" align="center"/>
            <el-table-column label="订单时间" with="150" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time" v-if="scope.row.createtime!=null"></i>
                    <span
                        v-if="scope.row.createtime!=null"
                    >{{ scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="买家" prop="usernick" width="150" align="center"/>

          <el-table-column label="支付方式" prop="paymenttype" width="150" align="center">
                <template slot-scope="scope">
                <div v-if="scope.row.paymenttype===1">
                    <span>微信支付</span>
                </div>
                    <div v-if="scope.row.paymenttype===2">
                        <span>支付宝支付</span>
                    </div>
                    <div v-if="scope.row.paymenttype===3">
                        <span>银联支付</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="实付金额" prop="orderrealprice" width="150" align="center"/>


            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click.native="detailForm(scope.$index, scope.row)"
                    >查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页模块start-->
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :current-page="query.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--分页模块end-->

    </div>
</template>
<script>
    import {
        getList,
        getTotalSalesStatistics
    } from "../../api/statistics/statistics.js";
    import Tinymce from "../../components/Tinymce/index.vue";
    import {BASE_URL} from "../../config/app";

    /*用作表单的数据初始化*/
    const formJson = {
        commodityid: "",//商品id
        commodityname: "",//商品名称
        recommendstatus: 0,//商品'0不推荐1推荐',
        onshelfstatus: 1,//商品 0全部，  1不上架 2上架',
        commodityicon: "",//商品图片
        commodityprice: "",//       decimal(20,2),
        commodityoldprice: "",//    decimal(20,2),
        commodityfrom: "",// 货源地
        topcategoryname: "",//一级分类
        secondarycategoryname: "",//二级分类
        thirdcategoryname: "",//三级分类

        commoditynum: "",// 库存
        createtime: "",// 添加时间
        commoditydesc: "",//商品描述
        commoditypiclist: [],//图片
        piclist:"", //图片列表
        /**/
        topcategoryid: "",//一级分类id',
        secondarycategoryid: "",//二级分类id',
        thirdcategoryid: "",// 三级分类id,
        warehouseid: "",//仓库id
        inids:"" //参数id

    };

    export default {
        components: {
            Tinymce
        },
        data() {
            return {
                pickerOptions: {//快速选择日期
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 7
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 30
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 90
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近六个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 180
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                query: {//查询条件
                    content: "",
                    starttime: "",
                    endtime: "",
                    currentPage: 1,
                    pageSize: 10,
                    paymenttype: ""//支付方式 1:微信 2支付宝 3银联
                },
                query1: {//头部查询条件
                    starttime: "",
                    endtime: ""
                },
                formData: formJson,//新增或修改的对象
                formName: '',
                formMap: {
                    add: "添加",
                    edit: "编辑",
                    detail:"查看"
                },

                curRowIndex:0,//图片row
                createTime: [],//选择日期时需要的model
                createTime1: [],//选择日期时需要的model
                list: [],//列表集合
                headdata:{},//头部信息
                totalNumber: 0,//分页总页数
                formVisible: false,//添加编辑显示
                loading: true,//列表加载
                formLoading: false,//表单提交加载
                allLoding: false,//全屏加载
                cancelToggle: false,
                detailVisible: false,//查看
                classification: false,
                multipleSelection: [], //多选集合

            };
        },

        methods: {
            dataexport(){
                //alert("导出")
                window.location.href =
                    BASE_URL +
                    "/SalesStatistics/exportdata?paymenttype=" + this.query.paymenttype + "&starttime="
                    + this.query.starttime + "&endtime=" + this.query.endtime+"&content=" + this.query.content;
            },

            //add 隐藏表单
            hideForm() {
                // 更改值
                this.formVisible = !this.formVisible;
                // 清空表单
                this.$refs["dataForm"].resetFields();

                this.query.warehousename = "";
                return true;
            },
            /* --------------*/
            //筛选上架
            shelfstatus() {
                //  alert(this.query.onshelfstatus);

                if (this.query.onshelfstatus === '0') {
                    this.$router.push({
                        path: ""
                    });
                    //刷新事件需要重置查询条件
                    this.createTime = [];
                    this.query = {
                        currentPage: 1,
                        pageSize: 10,
                    };
                    this.getList();
                } else {
                    this.query.currentPage = 1;
                    this.$router.push({
                        path: "",
                        query: this.query
                    });
                    this.getList();
                }


            },
            //头部筛选
            headdatachange() {
                this.loading = true;
                var params = new URLSearchParams();
                params.append("starttime", this.query1.starttime);
                params.append("endtime", this.query1.endtime);
                getTotalSalesStatistics(params)
                    .then(response => {
                        this.loading = false;
                        if (response.code) {
                            this.$message.error(response.message);
                            return false;
                        }
                        this.headdata=response.data;
                        this.loading = false;
                        this.$message.success("更新成功");
                        // 刷新数据
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },

            // 显示表单
            handleForm() {
                this.formVisible = true;
                this.formName="add"
                this.getBusWarehouse();
            },

            //显示 查看弹框
            detailForm(index, row) {
               // alert(row.orderid)
                if (row !== null) {
                    this.$router.push({ path:'/statistics/orderdetail',query:{orderid:row.orderid} });
                }
            },

            // 隐藏详情弹框
            hideDetailForm() {
                // 更改值
                this.detailVisible = !this.detailVisible;
                return true;
            },


            /*获取列表事件*/
            getList() {
                this.loading = true;
                this.list = [];
                getList(this.query).then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    let datalist = response.data.list || []
                    if (datalist.length > 0) {
                        let mylist = datalist
                        for (var i = 0; i < mylist.length; i++) {
                            if (mylist[i].onshelfstatus != null) {
                                mylist[i].onshelfstatus = mylist[i].onshelfstatus.toString();
                            }
                            if (mylist[i].recommendstatus != null) {
                                mylist[i].recommendstatus = mylist[i].recommendstatus.toString();
                            }
                        }
                        this.list = mylist
                    }
                    // this.list = response.data.list || [];

                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                }).catch(() => {
                    this.loading = false;
                    this.list = [];
                })
            },

            //获得分类
            getAllCategory() {
                this.loading = true;
                getCategory()
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        let data = response.data || [];
                        this.category = data;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            },
            //获得仓库
            getBusWarehouse() {
                this.loading = true;
                console.info("123")
                getBusWarehouseList()
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        let data = response.data || [];
                        this.buswarehouse = data;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            },

            /*日期选择事件*/
            dateChange(val) {
                if (val == null) {
                    this.query.starttime = "";
                    this.query.endtime = "";
                } else {
                    this.query.starttime = val[0];
                    this.query.endtime = val[1];
                    this.query.currentPage = 1;
                }
                this.getList();
            },
            /*头部日期选择事件*/
            dateChange1(val) {
                if (val == null) {
                    this.query1.starttime = "";
                    this.query1.endtime = "";
                } else {
                    this.query1.starttime = val[0];
                    this.query1.endtime = val[1];
                }
                this.headdatachange();
            },

            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.$router.push({
                    path: "",
                    query: this.query
                });
                this.getList();
            },

            /*刷新*/
            onRest() {
                this.$router.push({
                    path: ""
                });
                //刷新事件需要重置查询条件
                this.createTime = [];
                this.query = {
                    currentPage: 1,
                    pageSize: 10,
                };
                this.getList();
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            }

        },

        created() {
            this.getList();
            this.headdatachange();
        }
    }

</script>
<style type="text/css">
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 21px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>


